<template>
	<div class="zh-graduation">
        <nav-header>
            <template slot="menuBefore">
                <div class="th-title-icon">
                    <el-button
                        @click="fieldsTips = true"
                        icon="el-icon-warning"
                        circle title="提示" size="mini" >
                    </el-button>
                </div>
            </template>
        </nav-header>
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
					<div class="open-width" style="width: 100px">
						<el-select v-model="classParam.section_id" filterable placeholder="请选择">
						    <el-option 
						      v-for="item in orgLevel2"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						</el-select>
					</div>
					<div class="open-width" style="width: 100px">
						<el-select v-model="classParam.g_year" filterable placeholder="请选择">
						    <el-option 
						      v-for="(item,inx) in graduateYear"
						      :key="inx"
						      :label="item+(inx > 0 ? '年' : '')"
						      :value="(inx===0) ? '' : item">
						    </el-option>
						</el-select>
					</div>
					<div class="open-width" style="width: 200px">
						<el-input v-model="classParam.keyword" placeholder="请输入班级名，班主任名搜索"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
				</div>
				<div class="zh-open-right fr">
				</div>
			</div>
			<div class="zh-table-contents">
				<el-table
				    :data="classData"
				    border
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      type="index"
                      :index="typeIndex"
				      label="序号"
				      align="center"
				      show-overflow-tooltip
				      width="50"
				      >
				    </el-table-column>
                    <el-table-column
				      prop="update_time"
				      label="毕业学年"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="rename"
				      label="班级"
				      align="center"
				      show-overflow-tooltip>
				    </el-table-column>
                    <el-table-column
				      prop="teacher_name"
				      label="班主任"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="student_num"
				      label="学生人数"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      label="操作"
				      align="center"
				      >
			      	    <template slot-scope="scope">
			      	    	<el-button @click="toLink(scope.row)" type="text">班级信息</el-button>
			      	    </template>
				    </el-table-column>
				</el-table>
				<div class="table-pagination" v-if="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="classParam.page"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="classParam.size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="geClassList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>
        <el-dialog
            title="提示"
            :visible.sync="fieldsTips"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="50%">
            <ul style="padding: 20px 30px">
                <li style="list-style-type: disc;">毕业班存放数据为六年级/初三/高三/大四 年级班级数据</li>
                <li style="list-style-type: disc;">学生如遇留级、降级、重新分配班级等情况请去用户管理对该学生绑定班级进行设定</li>
            </ul>
            <div slot="footer" class="dialog-footer"></div>
        </el-dialog>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
		    	classData:[],//班级列表数据
		    	orgLevel2:[],//学段下拉
		        classParam:{//班级列表参数
					status:3,
					section_id:0,
		       		keyword: '',
		       		g_year:'',
		       		page:1,
		       		size:10,
					data_type:2
				},
				total_number:0,//总条数
				orgLevelParam:{ //获取学段参数
					level:2,
					pid:1,
					direction:'balance',
				},
                graduateYear:[],
                fieldsTips: false,
		    }
		},
		created(){
			this.getOrgLevel2();
			this.geClassList();
            this.getGraduateYear();
	    },
		methods: {
            toLink(obj) {
                this.$router.push('/user/class/class-management/' + obj.id + '?class=graduation');
            },
            reset() {
                this.classParam.keyword = '';
                this.classParam.g_year = null;
                this.classParam.section_id = null;
				this.classParam.page = 1;
                this.geClassList();
            },
			searchFunc(){
				this.classParam.page = 1;
				this.geClassList();
			},
			//毕业年份
			getGraduateYear(){
				let success = ( data=>{
				    let temp = deep_clone(data.data)
  
                    if (temp.end_year != '') {
                        let len = parseInt(temp.end_year) - parseInt(temp.start_year) + 1;

                        for (let i=0; i<len; i++) {
                            this.graduateYear.push(temp.start_year++)
                        }
                    }
                    this.graduateYear.unshift('全部年份');
            	})
            	this.$ajax.get('api/term/get_class_history_year',{params: {},func:{success:success}})
			},
			// 序号
            typeIndex(index) {
              	return index + (this.classParam.page - 1) * this.classParam.size + 1;
            },
            //获取学段
			getOrgLevel2(){
				let success = ( data=>{
						this.orgLevel2 = deep_clone(data.data);
						this.orgLevel2.unshift({id:0,name:'全部学段'});
				})
				if(this.$store.state.checkLevel){
					this.orgLevelParam.app_code = sessionStorage.getItem('CheckSchoolAppCode')
            		this.$ajax.get('api/network/get_platform_org',{params: this.orgLevelParam,func:{success:success}})
				}else{
				this.$ajax.get('api/org/org',{params: this.orgLevelParam,func:{success:success}})
				}
			},
			//获取班级数据
            geClassList(){
		    	// 重写成功回调
				let success = ( data => {
					this.classData = data.data.data;
					this.total_number = data.data.data_sum;
                });
                
				this.classParam.org_id = this.classParam.section_id;
  				this.$ajax.get('api/org/classes',{params: this.classParam,func:{success:success}});
		    },
		 	handleSizeChange(val) {
		 		this.classParam.page = 1;
		    	this.classParam.size = val;
		    	this.geClassList();
		    },
		    handleCurrentChange(val) {
		        this.classParam.page = val;
		        this.geClassList();
		    },
		},
  	}
</script>
<style lang="scss">
	.zh-graduation {
        .th-title-icon {
            position: absolute;
            top: 0;
            right: 40px;

            i {
                color: #DAA017;
                font-size: 16px;
            }
        }

        .zh-common-title-text {
            li {
                color: #000 !important;
            }
        }

		.el-table__body-wrapper table tbody {
			td:nth-child(8) {
				padding: 0;
			}
		}
	}
</style>